<template>
  <div>
    <el-form :model="form" :rules="rules" ref="basisRulesRef" size="small" style="padding:10px 10px;" label-position="top">
      <div class="titleclass">
        <span style="margin-left: 18px">申请信息</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="组织" prop="companyId">
            <el-select v-model="form.companyId"  placeholder="请选择业务单元" @change="selectDept" clearable v-selecttext="form.companyName,companyList,'companyId'">
              <el-option v-for="item in companyList" 
                :key="item.companyId" 
                :label="item.companyName" 
                :value="item.companyId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请部门" prop="deptId">
            <el-select v-model="form.deptId"  v-selecttext="form.deptName,deptList,'deptId'" placeholder="请选择部门" clearable @change="ff">
              <el-option v-for="item in deptList" 
                :key="item.deptId" 
                :label="item.deptName" 
                :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作过程" prop="processCode">
            <el-select v-model="form.processCode"  v-selecttext="form.processName,processList,'processCode'" placeholder="请选择操作过程">
              <el-option v-for="item in processList" 
                :key="item.processCode" 
                :label="item.processName" 
                :value="item.processCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="作业内容">
            <el-input v-model="form.workContent"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用工日期" prop="workDate">
            <el-date-picker
				    	v-model="form.workDate"
				    	type="date"
				    	format="yyyy年MM月dd日"
				    	value-format="yyyy-MM-dd"
				    	placeholder="选择日期"
				    	class="others"
              clearable
              style="width: 100%"
				    ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="班次" prop="workTime">
            <el-select
				    	clearable
				    	placeholder="请选择班次"
				    	v-model="form.workTime"
				    	class="others"
				    	popper-class="selectClass"
				    >
				    	<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				    </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="货种" prop="cargoCategoryCode">
            <el-select
				    	clearable
				    	placeholder="请选择货名"
				    	v-model="form.cargoCategoryCode"
				    	class="others"
				    	popper-class="selectClass"
              v-selecttext="form.cargoCategoryName,cargoList,'cargoCategoryCode'"
				    >
				    	<el-option v-for="(item, index) in cargoList" :key="index" :label="item.cargoCategoryName" :value="item.cargoCategoryCode"></el-option>
				    </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="船名航次" prop="shipvoyageId">
            <el-select
				    	clearable
				    	placeholder="请选择船名航次"
				    	v-model="form.shipvoyageId"
				    	class="others"
				    	popper-class="selectClass"
              @change="selectShip"
				    >
				    	<el-option v-for="(item, index) in shipList" :key="index" :label="item.shipvoyageName" :value="item.shipvoyageId"></el-option>
				    </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请机械">
            <el-input v-if="!isShow" v-model="form.supporting"  @focus="selectMachine" @clear="clearfrontEdgeArrDetail()"></el-input>
            <el-popover
							placement="bottom"
							width="300"
							trigger="click"
							@show="getListteqpForEdit(form.supportingList)"
							v-if="isShow"
							ref="showFrontEdgeForEdit"
						>
							<el-input
								v-model="form.supporting"
								autocomplete="off"
								size="small"
								slot="reference"
								placeholder="请选择机械配置"
								suffix-icon="el-icon-arrow-down"
								class="no-border"
								clearable
								@clear="clearfrontEdgeArrDetail"
							></el-input>
							<div class="box-info">
								<el-table :data="supportingList" height="400px">
									<el-table-column
										prop="equipmentTypeName"
										label="机械类型"
										show-overflow-tooltip
									></el-table-column>
									<el-table-column prop="vehicleType" label="编号/数量" >
										<template slot-scope="scope">
											<el-input
												v-model="scope.row.num"
												type="text"
												size="mini"
												placeholder="请输入"
												v-if="scope.row.equipmentTypeName != '门机'"
											></el-input>
											<el-select
												placeholder="请选择"
												size="mini"
												multiple
                        clearable
												v-model="scope.row.doorMachineList"
												v-if="scope.row.equipmentTypeName == '门机'"
											>
												<el-option
													v-for="(item, index) in machineTypeList"
													:key="index"
													:label="item.equipmentNo"
													:value="item.equipmentNo"
												></el-option>
											</el-select>
										</template>
									</el-table-column>
								</el-table>
								<div class="btn-sure">
									<el-button
										type="primary"
										@click="sureVehicleForEdit"
										size="mini"
									>
										确定
									</el-button>
									<el-button
										type="info"
										@click="cancelVehicleForEdit"
										size="mini"
									>
										取消
									</el-button>
								</div>
							</div>
						</el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="申请劳务量">
            <el-input v-model="form.laborDispatch"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人">
            <el-input v-model="form.applyName"  clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" :row="4" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="demo-drawer__footer">
      <el-button
        size="small"
        type="primary"
        @click="addUpdate()"
      >保 存</el-button>
    </div>
  </div>
</template>
<script>
import publicapi from '@/api/public/index'
import api from '@/api/Product/oddJobApply/index'
export default {
  props: {
    addSuccess: {
      type: Function,
    },
    oddform: {
      type: Object
    }
  },
  data () {
    return{
      form: {
        supportingList: [],
      },
      companyList: [], // 组织
      deptList: [], // 部门
      processList: [], // 作业过程
      workTimeList: [], // 班次
      shipList: [], // 船
      isShow: false,
      machineList: [], //机械
      machineTypeList: [], //门机
      cargoList: [],
      supportingList: [],
      rules: {
        companyId: [
            { required: true, message: '请选择组织', trigger: 'change' }
          ],
        // deptId: [
        //     { required: true, message: '请选择申请部门', trigger: 'change' }
        //   ],
        processCode: [
            { required: true, message: '请选择操作过程', trigger: 'change' }
          ],
        workDate: [
          {required: true, message: '请选择日期', trigger: 'change' }
        ],
        workTime: [
          { required: true, message: '请选择班次', trigger: 'change' }
        ],
        cargoCategoryCode: [
          { required: true, message: '请选择货种', trigger: 'change' }
        ],
        shipvoyageId: [
          { required: true, message: '请选择船名航次', trigger: 'change' }
        ],
        desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
      }, //
    }
  },
  created () {
    this.getlistProcess()
    this.getCompanyList()
    this.getDictData()
    this.getListShipvoyage()
    this.querymachine()
    this.queryMachineTypeOne()
    this.setFormInfo()
    this.getListCargo()
  },
  methods: {
    // 获取业务单元
    getCompanyList () {
      publicapi.getListComp().then(res => {
        this.companyList = res.data.data
      })
    },
    // 查询字典信息
    getDictData () {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 获取操作过程
    getlistProcess () {
      publicapi.getlistProcess().then(res => {
        this.processList = res.data.data
      })
    },
    // 查询机械类型
    querymachine () {
      api.querymachine().then(res => {
        this.machineList = res.data.data
      })
    },
    // 获取货种
    getListCargo () {
      publicapi.getlistCargoCategory().then(res => {
        this.cargoList = res.data.data
      })
    },
    // 清空机械
    clearfrontEdgeArrDetail () {
      this.$set(this.form,'supporting','')
      this.$set(this.form,'supportingList',[])
    },
    // 查询机械类型为门机的编号
    queryMachineTypeOne () {
      api.queryMachineTypeOne().then(res => {
        this.machineTypeList = res.data.data
      })
    },
    // 船名
    getListShipvoyage () {
      publicapi.getListShipvoyage().then(res => {
        this.shipList = res.data.data
      })
    },
    // 通过业务单元获取部门信息
    selectDept (val) {
      console.log(val)
      if (val) {
        api.queryDept(val).then(res => {
          this.deptList = res.data.data
        })
      } else {
        this.form.deptId = ''
        this.deptList = []
      }
    },
    // 选择船名 航次
    selectShip (val) {
      this.form.shipName = this.shipList.filter(v => v.shipvoyageId == val)[0].shipName
      this.form.voyage = this.shipList.filter(v => v.shipvoyageId == val)[0].voyage
    },
    // 选择机械
    selectMachine () {
      this.isShow = true
    },
    // 新增-编辑
    addUpdate () {
      if (this.form.id) {
        this.updateById()
      } else {
        this.add()
      }
    },
    // 选择机械
    getListteqpForEdit (list) {
      list = list ? list : []
      var dataList = []
      var vehicleList = []
      dataList = this.machineList
      dataList.forEach(v => {
        list.forEach(j => {
          if (v.equipmentTypeName == j.equipmentTypeName) {
            v.num = j.num + ''
            v.equipmentNo = j.equipmentNo + ''
            v.id = j.id + ''
          }
        })
      })
      console.log(dataList)
      dataList.map(v => {
        var obj = {}
        if (v.equipmentTypeName == '门机') {
          obj.equipmentTypeName = v.equipmentTypeName
          obj.equipmentNo = v.equipmentNo
          obj.id = v.id ? v.id : v.equipmentTypeId
          obj.doorMachineList = []
          let equipmentNoList = v.equipmentNo ? v.equipmentNo.split(',') : []
          for(let i = 0;i < equipmentNoList.length;i++) {
            var noObj = {}
						noObj = equipmentNoList[i]
						obj.doorMachineList.push(noObj)
          }
        } else {
          obj.equipmentTypeName = v.equipmentTypeName ? v.equipmentTypeName : ''
          obj.id = v.id ? v.id : ''
          obj.num = v.num ? v.num : ''
        }
        vehicleList.push(obj)
      })
      this.supportingList = vehicleList
      console.log(this.supportingList)
    },
    // 确认机械
    sureVehicleForEdit () {
      var data = []
      data = this.supportingList
      console.log(data)
      var showArr = ''
      var chooseArr = []
      for (let i = 0; i < data.length;i++) {
        if (data[i].equipmentTypeName != '门机') {
          if (data[i].num) {
            chooseArr.push(data[i])
            showArr += 
              data[i].equipmentTypeName +
							data[i].num +
							","
          }
        } else if (data[i].equipmentTypeName == '门机') {
          if (data[i].doorMachineList && data[i].doorMachineList.length > 0) {
            for (let j = 0;j < data[i].doorMachineList.length;j++) {
              let door = data[i]
              var model = {}
              model.equipmentTypeId = door.id + ''
              model.equipmentNo = door.doorMachineList[j]
              model.equipmentTypeName = door.equipmentTypeName
              chooseArr.push(model)
              showArr += model.equipmentNo + ','
            }
          }
        }
      }
      if (showArr != "") showArr = showArr.substring(0, showArr.length - 1)
      this.form.supporting = showArr
      this.form.supportingList = chooseArr
      this.isShow = false
    },
    // 取消
    cancelVehicleForEdit () {
      this.isShow = false
    },
    // 新增
    add () {
      this.$refs.basisRulesRef.validate((valid) => {
        if (!valid) {
          return false
        }
        let params = Object.assign({},this.form)
        params.applyDeptId = params.deptId
        params.applyDeptName = params.deptName
        delete params.deptId
        delete params.deptName
        api.addApplication(params).then(res => {
          if (res.data.code != '0000') {
            this.$message.error(res.data.msg)
            return
          }
          this.$message.success('新增成功')
          this.addSuccess()
        })
      })
    },
    // 回显数据
    setFormInfo () {
      console.log(this.oddform)
      console.log(this.form)
      if (this.oddform != undefined && this.oddform != null) {
        this.form = this.oddform
        this.form.deptId = this.form.deptId ? this.form.deptId + '' : ''
        this.selectDept(this.form.companyId)
      } else {
        this.form = {}
        this.form.supportingList = []
      }
    },
    // 编辑
    updateById () {
      this.$refs.basisRulesRef.validate((valid) => {
        if (!valid) {
          return false
        }
        let params = Object.assign({},this.form)
        api.updateApplication(params).then(res => {
          if (res.data.code != '0000') {
            return this.$message.error(res.adta.msg)
          }
          this.$message.success('修改成功')
          this.addSuccess()
        })
      })
    },
    ff () {
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="less" scoped>

.titleclass{
  background-color: rgb(247, 246, 246);
  height: 50px;
  width: 101%;
  margin-top: -10px;
  margin-left: -10px;
  line-height:50px;
}

/deep/ .el-form-item {
  padding-right: 20px;
  .el-select{
    width: 100%;
  }
}
</style>